<div class="container-card">
    <div class="cards-grid">
        @for (customer of customers; track trackbyService.customer($index, customer)) {
            <div class="customer-card card">
            <div class="card-header">
                <div class="card-header-content">
                    <h3 class="customer-name">
                        <a [routerLink]="['/customers',customer.id,'details']">
                            {{customer.firstName | capitalize }} {{ customer.lastName | capitalize }}
                        </a>
                    </h3>
                    <div class="card-actions">
                        <a [routerLink]="['/customers',customer.id,'edit']" 
                           class="action-btn action-btn--small action-btn--edit" 
                           title="Edit Customer">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                                <path d="m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                            </svg>
                        </a>
                        <button class="action-btn action-btn--small action-btn--delete" 
                                (click)="deleteCustomer(customer, $event)"
                                title="Delete Customer">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="3,6 5,6 21,6"/>
                                <path d="m19,6v14a2,2 0 0,1-2,2H7a2,2 0 0,1-2-2V6m3,0V4a2,2 0 0,1,2-2h4a2,2 0 0,1,2,2v2"/>
                                <line x1="10" y1="11" x2="10" y2="17"/>
                                <line x1="14" y1="11" x2="14" y2="17"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="card-content">
                    <div class="customer-avatar">
                        <img src="images/{{customer.gender | lowercase}}.png" 
                             class="customer-image" 
                             alt="{{customer.firstName}} {{customer.lastName}}" />
                    </div>
                    <div class="customer-info">
                        <div class="customer-location">
                            {{customer.city | trim }}, {{customer.state.name}}
                        </div>
                        <div class="customer-actions">
                            <a [routerLink]="['/customers',customer.id,'orders']" 
                               class="view-orders-link">
                                View Orders
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        }
    </div>
    
    @if (!customers.length) {
        <div class="no-records">
            <div class="no-records-icon">👥</div>
            <h3>No customers found</h3>
            <p>Try adjusting your search criteria or add a new customer.</p>
        </div>
    }
</div>